<template>
  <view class="page">
    <view class="search-barCon">
      <view v-if="!hideSearch" class="input-placeholder" @click="searchEdit">
        <icon type="search" size="14px" class="searchIcon-placeholder" />
        <view class="searchLabel-placeholer">搜索</view>
      </view>
      <view v-if="hideSearch" class="input-box">
        <input
          class="input"
          type="text"
          placeholder="搜索"
          @focus="getFocus"
          @input="inputBeginEdit"
        >
        <icon class="search-icon" type="search" size="14px" />
      </view>
      <view v-if="hideSearch" class="input-button" @click="searchEndEdit">取消</view>
    </view>
    <qsTab
      ref="tabs"
      :tabs="tabs"
      min-width="350"
      animation-mode="line3"
      :current="current"
      swiper-width="750"
      @change="tabChange"
    />

    <swiper
      class="swiper-approval"
      :current="current"
      @change="swiperChange"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        v-for="(item, index) in tabs"
        :key="index"
        class="swiper-item"
        @transition="transition"
      >
        <scroll-view scroll-y class="list" :style="{height:swiperHeight-60+'px'}" @scrolltolower="loadmore(current)">
          <!-- 待处理 -->
          <view v-if="approvalList.length>0" class="content-list">
            <view class="content-list-item-wrap">
              <view
                v-for="(approval,idx) in approvalList"
                :key="idx"
                class="content-list-item"
                @click="itemClick(approval)"
              >
                <view class="content-item-icon">
                  <view class="content-item-iconView">
                    <!-- {{ userName }} -->
                    <image :src="avatar" />
                  </view>
                </view>
                <view class="content-item-view">
                  <view class="content-item-info">
                    <view class="content-item-topView">
                      <view class="content-item-title-s">{{ userName }}的{{ approval.flowName }}</view>
                      <view
                        class="content-item-status"
                        :style="{
                          'color' : getStatusStyleColor(approval.status),
                          'border' : getStatusStyleBorder(approval.status)
                        }"
                      >{{ getStatusTitle(approval.status) }}</view>
                    </view>
                    <!-- <rich-text :nodes="getContent(item)" /> -->
                    <view
                      class="content-item-type first"
                    >{{ '【审批类型】' }}{{ approval.flowGroupName }}</view>
                    <view
                      class="content-item-type"
                    >{{ '【审批内容】' }}{{ approval.flowName != null ? approval.flowName : '--' }}</view>
                    <view
                      class="content-item-type"
                    >{{ '【开始时间】' }}{{ approval.gmtCreate | fullTime(approval.gmtCreate) }}</view>
                  </view>
                  <view class="content-item-time">{{ approval.gmtCreate | formatDate(approval.gmtCreate) }}</view>
                </view>
              </view>
            </view>
          </view>
          <view v-else>
            <view class="tip mt64">
              当前暂无审批
            </view>
          </view>
          <uni-load-more :status="pullupLoadingType" />
        </scroll-view>
      </swiper-item>
    </swiper>
    <view class="tab-placeholder" />
  </view>
</template>

<script>
import { formatDate, fullTime } from '@/utils/tools.js'
import qsTab from "./me-Qs/QS-tabs.vue";
import { mapState } from 'vuex'
import { UserApprosCreateByMeReq } from '@/services/approval'
import uniLoadMore from "./uni-load-more/uni-load-more.vue";
export default {
  components: {
    qsTab,
    uniLoadMore
  },
  filters: {
    fullTime: fullTime,
    formatDate: formatDate
  },
  data() {
    return {
      current: 0,
      tabs: [{ name: "待处理" }, { name: "已处理" }],
      hideSearch: false,
      hasEnd: false,
      inputValue: '',
      approvalList: [],
      approvalContent: '',
      contenthtml: '',
      userName: '',
      avatar: '',
      pageparams: {
        pageNo: 1,
        pageSize: 20
      },
      loadingType: 0,
      contentText: {
        contentdown: "上拉显示更多",
        contentrefresh: "正在加载...",
        contentnomore: "没有更多数据了"
      },
      swiperHeight: 0,
      pullupLoadingType: 'more'
    };
  },
  computed: {
    ...mapState(['site'])
  },
  created(){
    this.companyId = this.site.companyId
    this.pageparams.companyId = this.site.companyId
    this.userName = uni.getStorageSync('name')
    uni.getUserInfo({
      provider: 'weixin',
      success: (res) => {
        this.weixinInfo = res.userInfo
        this.avatar = res.userInfo.avatarUrl
      },
      fail: (err) => {
        console.log('debug log --> ', err)
      }
    })
    uni.getSystemInfo({
      success: (res) => {
        const height = res.windowHeight - uni.upx2px(100);
        this.swiperHeight = height;
      }
    });
    this.getInitApprovallist();// 开启默认加载
  },
  onPullDownRefresh() {
    this.getnew()
  },
  methods: {
    getInitApprovallist(){
      this.entityCount = []
      this.approvalList = []
      this.pageparams.pageNo = 1;
      UserApprosCreateByMeReq({ ...this.pageparams, hasEnd: this.hasEnd }).then(res => {
        this.approvalList = res.entities
        this.entityCount = res.entityCount
        if(this.approvalList.length < this.entityCount){
          this.pullupLoadingType = "more"
        }else{
          this.pullupLoadingType = "noMore"
        }
      })
    },
    loadmore() {
      if(this.approvalList.length < this.entityCount){
        this.pullupLoadingType = "more"
        this.pageparams.pageNo++
        UserApprosCreateByMeReq({ ...this.pageparams, hasEnd: this.hasEnd }).then(res => {
          this.approvalList = this.approvalList.concat(res.entities)
        })
      }else{
        this.pullupLoadingType = "noMore"
      }
    },
    // 下拉刷新
    getnew(){
      this.approvalList = []
      this.pageparams.pageNo = 1;
      UserApprosCreateByMeReq({ ...this.pageparams, hasEnd: this.hasEnd }).then(res => {
        this.approvalList = res.entities
        // 提示下拉刷新了
      })
      uni.stopPullDownRefresh()// 关闭下拉刷新
    },
    itemClick(item){
      item.avatar = this.avatar
      uni.navigateTo({
        url: "/approval/applyDetail?userApproId=" + item.id + "&item=" + encodeURIComponent(JSON.stringify(item)) + '&type=' + 'createdByme'
      });
    },
    getStatusStyleColor(status) {
      if (status === 0) {
        return "rgba(252, 175, 79, 1)";
      } else if (status === 1) {
        return "rgba(252, 175, 79, 1)";
      } else if (status === 2) {
        return "rgba(13, 182, 172, 1)";
      } else if (status === 3) {
        return "rgba(250, 80, 81, 1)";
      } else if (status === 4) {
        return "rgba(192, 192, 192, 1)";
      }
      return "rgba(192, 192, 192, 1)";
    },
    getStatusStyleBorder(status) {
      if (status === 0) {
        return "1px solid rgba(252, 175, 79, 1)";
      } else if (status === 1) {
        return "1px solid rgba(252, 175, 79, 1)";
      } else if (status === 2) {
        return "1px solid rgba(13, 182, 172, 1)";
      } else if (status === 3) {
        return "1px solid rgba(250, 80, 81, 1)";
      } else if (status === 4) {
        return "1px solid rgba(192,192,192,1);";
      }
      return "1px solid rgba(192, 192, 192, 1)";
    },
    getStatusTitle: function(status) {
    // 0:待审批1:审批中2:通过3:驳回4:撤回5:其他人驳回
      if (status === 0) {
        return "待审批";
      } else if (status === 1) {
        return "审批中";
      } else if (status === 2) {
        return "已通过";
      } else if (status === 3) {
        return "已驳回";
      } else if (status === 4) {
        return "已撤回";
      } else if (status === 5) {
        return "其他人通过";
      }
      return "其他人驳回";
    },
    getContent(item){
      // approName
      const obj = {
        "请假": {
          请假类型: "leavetype",
          开始时间: "creatime",
          结束时间: "overtime"
        },
        "外出": {
          外出事由: "outreason",
          开始时间: "creatime",
          结束时间: "overtime"
        },
        "补卡申请": {
          异常状态: "states",
          补卡理由: 'reason',
          补卡时间: "punchTime"
        },
        "工作交接": {
          交接内容: "content",
          开始时间: "creatime",
          结束时间: "overtime"
        },
        "加班": {
          加班事由: "reason",
          开始时间: "creatime",
          结束时间: "overtime"
        }, // 人事管理
        "入职审批": {
          入职日期: "content",
          转正日期: "creatime",
          职位: "overtime"
        },
        "转正": {
          入职日期: "content",
          转正日期: "creatime",
          职位: "overtime"
        },
        "调岗申请": {
          转入部门: "content",
          转出部门: "creatime",
          生效日期: "overtime"
        },
        "离职申请": {
          申请离职日期: "content",
          预计离职日期: "creatime",
          所在部门: "overtime"
        }, // 行政管理
        "物品领用": {
          物品用途: "content",
          物品名称: "creatime",
          领用时间: "creatime"
        },
        "通用审批": {
          审批类型: "content", // 审批类型或者审批内容
          审批详情: "creatime",
          申请时间: "creatime"
        }, // 财务管理
        "报销": {
          报销类型: "content",
          费用类型: "creatime",
          费用金额: "creatime"
        },
        "采购": {
          物品用途: "content",
          物品名称: "thingname",
          领用时间: "creatime"
        },
        "付款申请": {
          付款事由: "reason",
          付款方式: "payway",
          付款金额: "payaccount"
        }
      }
      var approContent = ''
      for(var i in obj) {
        if(i === item.approName){
          var contentlist = Object.keys(obj[i])
          contentlist.forEach(content => {
            var approItem = `<div
                  class="content-item-type"
                >【` + content + `】` + item[obj[i][content]] + `</div>`
            approContent += approItem
          })
        }
      }
      return approContent
    },
    inputBeginEdit: function(event) {
      this.inputValue = event.target.value;
      UserApprosCreateByMeReq({ ...this.pageparams, hasEnd: this.hasEnd, nameQuery: this.inputValue }).then(res => {
        this.approvalList = res.entities
      })
    },
    getFocus(e) {
      this.seen = false;
    },
    dismissFocus: function() {
      this.seen = true;
    },
    swiperChange(e) {
      this.current = e.detail.current;
    },

    transition({ detail: { dx }}) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current }}) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    /**
     * 选显卡切换
     * */
    tabChange(index) {
      this.current = index;
      if(index === 0){
        this.hasEnd = false
      }else{
        this.hasEnd = true
      }
      this.pageparams.pageNo = 1
      UserApprosCreateByMeReq({ ...this.pageparams, hasEnd: this.hasEnd, nameQuery: this.inputValue }).then(res => {
        this.approvalList = res.entities
        this.entityCount = res.entityCount
      })
    },
    searchEdit() {
      this.hideSearch = true;
    },
    searchEndEdit() {
      this.inputValue = ''
      this.hideSearch = false;
      this.getInitApprovallist()
    }
  }
};
</script>

<style lang="scss">
.page {
  width: 98%;
  height: 100vh;
  overflow: auto;
  background:#FAFBFB;
}
.content-item-title-s {
    max-width: 160px;
    margin-left: 4px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: rgba(37, 37, 37, 1);
  }
</style>
